<template>
  <!-- 用于展示员工真实照片和员工的基本信息 -->
    <el-container>
      <el-aside style="padding-right:0;width:210px;">
        <img class="head-portrait" style="" :src="basicInfo.headPortrait" alt=""/>
      </el-aside>
      <el-main>
        <div style="width:660px;margin-right: 100px">
          <el-row>
            <el-col :span="12">
              <el-col class="label" :span="10">姓名: </el-col>
              <el-col class="content" :offset="1"  :span="11">{{basicInfo.name}}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col class="label" :span="10">性别: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.sex}}</el-col>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-col class="label" :span="10">出生日期: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.birthday}}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col class="label" :span="10">民族: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.nation}}</el-col>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-col class="label" :span="10">身份证号: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.IDcard}}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col class="label" :span="10">毕业院校: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.college}}</el-col>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-col class="label" :span="10">最高学历: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.educationBackground}}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col class="label" :span="10">学习形式: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.qualificationsType}}</el-col>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="12">
              <el-col class="label" :span="10">专业: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.major}}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col class="label" :span="10">学习形式: </el-col>
              <el-col class="content" :offset="1" :span="11">{{basicInfo.qualificationsType}}</el-col>
            </el-col>
          </el-row>

        </div>
      </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "BasicInfo",
        props: {
          basicInfo: Object
        },
        data(){
          return {
            formLabelWidth: '120px',
            // basicInfo: basicInfo
          }
        }
    }
</script>

<style scoped>

  .el-row{
    margin-bottom: 20px;
  }
  .head-portrait{
    width:120px;
    height:160px;
    margin:30px 0 0 50px;
    box-shadow: 0 2px 8px  rgba(81, 66, 66, 0.52), 0 0 6px rgba(0, 0, 0, .04)
  }
  .label,.content{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-size: 15px;
  }
  .label{
    color: #909399;
    text-align: right;
  }
  .content{
    color: #606266;
    text-align: left;
  }
</style>
